<template>
	<view class="noEntry" v-if="!show">
		<view class="noentryBgbox">
			<view class="noentryBgbox">
				<view class="noentryBgbox-top">
					<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#050033'}"></view>
					<uni-nav-bar backgroundColor="#050033;" color="#FFF" :title="$t('language.meeting')"
						@clickLeft="goBack" left-icon="left" :border="false" />
					<view class="headerChangeLanguage" style="display: flex; justify-content: space-between;">
						<view class="logo">
							<!-- #ifdef H5 -->
							<image src="/static/logo.png" />
							<!-- #endif -->
						</view>
						<view class="language" @click="changeLanguage">
							<image src="../../static/100.png" mode=""></image>
							<text>{{$t('locale.lang')}}</text>
						</view>
					</view>
				</view>
				<swiper :autoplay="5000" indicator-color="#f6f5ef" style="height:840upx;" :style="{'paddingTop': `${statusBarHeight*2}px`}">
					<swiper-item style="height:840upx;" v-for="(image, index) in meetInfo.cover1" :key="index">
						<image :src="image" style="width:100%;height:840upx;object-fit: cover;" />
					</swiper-item>
				</swiper>
			</view>

			<view class="meetingTime">
				<view class="meeting-title">{{ $t('language.name') == '中文' ? meetInfo.title : meetInfo.e_title }}</view>
				<view class="meetingAbout">
					<u-parse @navigate="navigate" :content="$t('language.name') == '中文' ? meetInfo.intro : meetInfo.e_intro"></u-parse>
				</view>
			</view>

			<view class="meetingTime">
				<view class="meetingTitle">
					{{$t('index.text-64')}}
				</view>
				<view class="meetingAbout">
					<u-parse @navigate="navigate" :content="$t('language.name') == '中文' ? meetInfo.desc : meetInfo.e_desc"></u-parse>
				</view>
			</view>

			<view class="meetingTime" v-if="trafficList.length > 0 && trafficList !== undefined">
				<view class="meetingTitle">
					{{ $t('language.meeting11') }}
				</view>
				<view class="trafficRoutes">
					<view class="trafficGroup" v-for="(item, index) in trafficList" :key="index">
						<view class="imgbox">
							<!-- <image :src="item.cover" /> -->
							<view class="imgModel">
								<view class="leftModel">{{ $t('language.name') == '中文' ? item.line : item.e_line }}
								</view>
								<view class="rightModel">
									<p>{{ $t('language.name') == '中文' ? item.location : item.e_location }}</p>
									<p>{{ $t('language.meeting16') }}
										{{ $t('language.name') == '中文' ? item.use_time : item.e_use_time }}
										{{ $t('language.meeting17') }}</p>
									<p v-if="item.cost != ''">{{ $t('language.meeting18') }} {{ item.cost }}
										{{ $t('language.meeting19') }}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="ModelSelf">
				<view v-for="(item, index) in customList" :key="index">
					<!-- 自定义富文本 开始 -->
					<view class="RichText" v-if="item.type == '1'">
						<view class="meetingTitle">{{ $t('language.name') == '中文' ? item.title : item.e_title }}</view>
						<u-parse @navigate="navigate" :content="$t('language.name') == '中文' ? item.content : item.e_content"></u-parse>
					</view>
					<!-- 自定义富文本 结束 -->
					<!--自定义banner 开始 -->
					<view class="Custom" v-if="item.type == '2'">
						<view class="meetingTitle">{{ $t('language.name') == '中文' ? item.title : item.e_title }}</view>
						<swiper :autoplay="5000" :indicator-dots="true" indicator-active-color="#d96932"
							indicator-color="#f6f5ef" style="height: 460upx;">
							<swiper-item style="height: 460upx;" v-for="(citem, cindex) in item.image" :key="cindex">
								<image mode="aspectFit" :src="citem" style="display:block;width:100%" />
							</swiper-item>
						</swiper>
					</view>
					<!--自定义banner 结束 -->
				</view>
			</view>
			<view class="footerBottom"><image :src="`${baseUrl}/static/img/a_top.png`" mode="widthFix" /></view>
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import uParse from '@/components/u-parse/u-parse.vue'
	import {
		info,
	} from "@/api/user";
	export default {
		name: 'meetingInfo',
		components: {
			uniIcons,
			uParse
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				show: true,
				flag: 0,
				tabOnline: 0,
				evenId: '',
				meetInfo: '',
				timeList: [],
				content: [],
				trafficGroup: [],
				HotelList: [],
				trafficList: [],
				desData: [],
				customList: []
			};
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let evenId = o.evenId;
			this.evenId = evenId;
			this.getInfo();
		},
		methods: {
			navigate(href) {
				// #ifdef H5
				window.location = href;
				// #endif
				// #ifdef MP
				console.log(href, 'href')
				uni.navigateTo({
					url: '/pages/web/autoWeb?url=' + encodeURIComponent(href)
				})
				// #endif
			},
			async getInfo() {
				uni.showLoading({
					title: 'loading'
				})
				const response = await info({
					event_id: this.evenId
				});
				uni.hideLoading()
				if (response.code == 200) {
					this.meetInfo = response.data;
					this.HotelList = response.data.hotel;
					this.trafficList = response.data.traffic;
					this.timeList = response.data.schedule.date;
					this.content = response.data.schedule.content;
					this.content = response.data.schedule.content;
					this.desData = response.data.schedule.des
					this.customList = response.data.custom;
					if (response.is_enroll == 1) {
						this.flag = 1;
					} else {
						this.flag = 0;
					}
					this.show = false;
				} else {
					console.log(response.msg);
				}
			},
			chooseTimeTab(index) {
				this.tabOnline = index;
			},
			goBack() {
				uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	};
</script>
<style lang="scss">
	.noentryBgbox-top {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999999;
	}

	.navbar {
		display: flex;
		align-items: center;
		// text-align: center;
		// justify-content: center;
		justify-content: flex-start;

		.bs {
			// margin: 0 auto;
			color: #FFFFFF;
			margin-left: 38%;
		}
	}

	.headerChangeLanguage {
		height: 100upx;
		// background: #1a140f;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.noEntryBgcolor {
		background: #fff;
		width: 100%;
		box-sizing: border-box;
	}

	.logo image {
		width: 78upx;
		height: 64upx;
	}


	.language {
		color: #fff;
		font-size: 24upx;
		flex-shrink: 0;
		display: flex;
		align-items: center;

		image {
			width: 30upx;
			height: 30upx;
			margin-right: 12upx;
		}
	}

	.meetingTitle {
		color: #fff;
		font-size: 40upx;
		line-height: 44upx;
		font-weight: bold;
		margin-top: 40upx;
		margin-bottom: 40upx;
		padding-left: 20upx;
		border-left: 6upx solid #b88d5b;
	}

	.scroll-tab {
		height: 90upx;
		white-space: nowrap;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: -30upx;
			bottom: -2upx;
			width: calc(100% + 60upx);
			height: 2upx;
			background-color: #dedddd;
		}

		.tab-item {
			display: inline-block;
			height: 90upx;
			line-height: 90upx;
			padding: 0 20upx;
			text-align: center;
			font-size: 30upx;
			margin-right: 40upx;
			color: #fff;

			&:last-child {
				margin-right: 0;
			}

			&.select {
				color: #d3a86a;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate3d(-50%, 0, 0);
					width: 72%;
					height: 2upx;
					background-color: #d3a86a;
				}
			}
		}
	}

	.schedule-info {
		padding-bottom: 38upx;

		.info-item {
			margin-top: 30upx;
			background-color: #fff;
			padding: 28upx 20upx;
			border-radius: 8upx;
			display: flex;
			align-items: center;

			.time {
				width: 84upx;
				font-size: 30upx;
				flex-shrink: 0;
				text-align: center;
				color: #666666;
			}

			.content {
				font-size: 30upx;
				padding-left: 30upx;
				margin-left: 30upx;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate3d(0, -50%, 0);
					width: 1upx;
					height: 100upx;
					background-color: #ededed;
				}
			}
		}
	}

	.linkHref {
		color: #fff;
		display: flex;
		padding: 50upx 30upx;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.linkHref>view {
		width: 33.33%;
		text-align: center;
		height: 300upx;
	}

	.linkHref>view>image {
		width: 130upx;
		height: 130upx;
		display: block;
		margin: 0 auto;
		margin-bottom: 16upx;
	}

	.twoLinkHref {
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.twoLinkHref>view {
		width: 330upx;
		height: 90upx;
		border-radius: 90upx;
		text-align: center;
		line-height: 86upx;
	}

	.twoLinkHref>view:first-child {
		background: #d96932;
		color: #fff;
		font-weight: bold;
		font-size: 36upx;
		border: 4upx solid #d96932;
	}

	.twoLinkHref>view:last-child {
		color: #fff;
		font-weight: bold;
		font-size: 36upx;
		border: 4upx solid #fff;
		box-sizing: border-box;
	}

	.meeting-title {
		color: #fff;
		font-size: 36upx;
		margin-bottom: 40upx;
		font-weight: bold;
	}

	.noentryBgbox {
		width: 100%;
		position: relative;
		background-color: #050033;
	}

	.noentryBgbox>image {
		width: 100%;
		display: block;
	}

	.meetingInfoModel {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 98;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.41);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.message {
		padding: 30upx;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		position: relative;
		top: -120upx;
	}

	.message h3 {
		font-size: 40upx;
		padding-bottom: 10upx;
		border-bottom: 2upx solid #fff;
	}

	.message h4 {
		font-size: 36upx;
		padding: 20upx 0;
	}

	.selectBtn {
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 60upx;
		left: 0;
	}

	.selectBtn>image {
		width: 40upx;
		height: 24upx;
	}

	.formBox {
		padding: 80upx 30upx;
	}

	.title {
		color: #000000;
		font-size: 44upx;
		margin-bottom: 40upx;
	}


	.meetingTime {
		padding: 30upx 30upx 20upx;
	}

	.Time {
		padding-top: 30upx;
	}

	.dayTime {
		padding: 30upx 0;
		border-bottom: 2upx solid #dbdbdb;
		clear: both;
	}

	.morning .dayTime:last-child {
		border-bottom: none;
	}

	.afternoon .dayTime:last-child {
		border-bottom: none;
	}

	.morning {
		border-bottom: 2upx solid #d96932 !important;
	}

	.afternoon {
		border-bottom: 2upx solid #d96932;
	}

	.dayTime>text:first-child {
		width: 200upx;
		float: left;
		color: #d96932;
		font-weight: bold;
	}

	.dayTime>text:last-child {
		width: 480upx;
		float: left;
		color: #444444;
	}

	.trafficRoutes {
		padding-bottom: 38upx;
	}

	.trafficGroup {
		width: 100%;
		margin-bottom: 30upx;
		overflow: hidden;
		border-radius: 20upx;
	}

	.trafficGroup .imgbox {
		width: 100%;
		min-height: 280upx;
		position: relative;
	}

	// .imgbox image {
	// 	width: 100%;
	// 	display: block;
	// 	height: 300upx;
	// }

	.imgModel {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 20upx;
	}

	.leftModel {
		width: 160upx;
		display: flex;
		justify-content: center;
		// align-items: center;
		height: 100%;
		padding: 0 12upx;
		border-radius: 12upx 0 0 12upx;
		color: #b88d5b;
		font-size: 28upx;
	}

	.rightModel {
		width: 560upx;
		height: 100%;
		background: #060143;
		border-left: 2upx solid #b88d5b;
		border-radius: 0 12upx 12upx 0;
		color: #fff;
		font-size: 28upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding: 48upx 30upx;
	}

	.rightModel view {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 100%;
	}

	.rightModel view:first-child {
		padding-left: 40upx;
		background: url($image-base-url + '/static/img/addressIcon.png') no-repeat left center;
		background-size: 21upx 28upx;
	}

	.rightModel view:nth-child(2) {
		padding-left: 40upx;
		background: url($image-base-url + '/static/img/timeIcon.png') no-repeat left center;
		background-size: 22upx 22upx;
	}

	.rightModel view:last-child {
		padding-left: 40upx;
		background: url($image-base-url + '/static/img/moneyIcon.png') no-repeat left center;
		background-size: 22upx 22upx;
	}

	.swipertop {
		display: flex;
		justify-content: flex-start;
		padding: 20upx 0;
		overflow: hidden;
	}

	.swipertop image {
		width: 1rem;
		height: 130upx;
	}

	.swipertop view {
		padding: 0 0 0 16upx;
		font-size: 24upx;
		color: #444;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		height: 130upx;
	}

	.hotelBanner {
		width: 100%;
	}

	.hotelBanner image {
		width: 100%;
		display: block;
		height: 1.55rem;
		border-radius: 0.04rem;
	}

	.footerBottom {
		padding: 20upx;
	}

	.footerBottom image {
		width: 100%;
	}

	.footerLinkHref {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40upx 30upx;
		box-sizing: border-box;
	}

	.footerLinkHref>view {
		width: 330upx;
		height: 90upx;
		border-radius: 90upx;
		text-align: center;
		line-height: 86upx;
	}

	.footerLinkHref>view:first-child {
		background: #d96932;
		color: #fff;
		font-size: 36upx;
		border: 4upx solid #d96932;
	}

	.footerLinkHref>view:last-child {
		background: #fff;
		color: #444;
		font-size: 36upx;
		border: 2upx solid #d96932;
	}

	.van-overlay {
		z-index: 99 !important;
		background: #f6f5ef;
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.Custom {
		padding: 20upx 30upx;
	}

	.Custom,
	.RichText {
		padding: 20upx 30upx;
	}
</style>